<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="12">
        <div id="vv" style="width: 600px;height:400px;"></div>
      </el-col>
      <el-col :span="12">
        <div id="like" style="width: 600px;height:400px;"></div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="24">
        <div id="upSum" style="width: 100%;height:280px;"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: "VideoDashboard",
  data() {
    return {
      ip: this.GLOBAL.ip,
      port: this.GLOBAL.port,


      video_uid_list: [],
      video_vv_list: [],
      video_like_list: [],


      videoList: [
        {
          video_vid: '',
          video_vname: '',
          video_uid: '',
          video_timestamp: '',
          video_vv: '',
          video_like: '',
          video_url: '',
          video_im: '',
        }
      ],
    }
  },
  methods: {
    vv() {
      var that = this;
      // 1. 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('vv'))
      // 2. 发起请求，获取数据
      var option = {
        title: {
          text: '视频播放量排行榜',
          left: 'center',
          fontSize: 40,
          textStyle: {
            fontSize: 30,
            fontWeight: 'lighter'
          }
        },

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },

        dataset: [
          {
            dimensions: [
              "video_vid",
              "video_vname",
              "video_uid",
              "video_timestamp",
              "video_vv",
              "video_like",
              "video_url",
              "video_img"],


            source: that.videoList,


          },
          {
            transform: {
              type: 'sort',
              config: {dimension: 'video_vv', order: 'desc'}
            }
          }
        ],
        xAxis: {
          type: 'category',
          axisLabel: {interval: 0, rotate: 30}
        },
        yAxis: {},
        series: {
          type: 'bar',
          encode: {x: 'video_vname', y: 'video_vv'},
          showBackground: true,
          datasetIndex: 1,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      };

      // 3. 使用刚指定的配置项和数据，显示图表
      myChart.setOption(option);
    },
    like() {
      var that = this;
      var myChart = echarts.init(document.getElementById('like'));
      var option = {
        title: {
          text: '视频点赞排行榜',
          left: "center",
          fontSize: 40,
          textStyle: {
            fontSize: 30,
            fontWeight: "lighter"
          }
        },


        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },

        dataset: [
          {
            dimensions: ['video_vname', 'video_like'],
            source: that.videoList,
          },
          {
            transform: {
              type: 'sort',
              config: {dimension: 'video_like', order: 'desc'}
            }
          }
        ],
        xAxis: {
          type: 'category',
          axisLabel: {interval: 0, rotate: 30}
        },
        yAxis: {},
        series: {
          type: 'line',
          encode: {x: 'video_vname', y: 'video_like'},
          showBackground: true,
          datasetIndex: 1,
          color: 'rgb(127, 255, 107)',
          backgroundStyle: {
            color: 'rgba(127, 255, 107, 0.2)'
          }
        }
      };

      option && myChart.setOption(option);
    },
    upSum() {
      var chartDom = document.getElementById('upSum');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: 'up主贡献榜'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: this.video_uid_list,
        },
        series: [
          {
            name: '播放量',
            type: 'bar',
            data: this.video_vv_list,

          },
          {
            name: '点赞数',
            type: 'bar',
            data: this.video_like_list,

          }
        ]
      };

      option && myChart.setOption(option);
    },


    findAllVideo: function () {
      var that = this;
      this.$http.get("http://" + that.ip + ":" + that.port + "/video/findAllVideo")
          .then(function (response) {
            // console.log(response.data);
            that.videoList = response.data
          }).catch(function (err) {
        console.log(err);

      });

    },

    upSort: function () {
      var that = this;
      this.$http.get("http://" + that.ip + ":" + that.port + "/video/upSort")
          .then(function (response) {
            console.log(response.data[0]);
            that.video_uid_list = response.data[0];
            console.log(response.data[1]);
            that.video_vv_list = response.data[1];
            console.log(response.data[2]);
            that.video_like_list = response.data[2];

          }).catch(function (err) {
        console.log(err);

      });

    },


  },
  created() {
    setTimeout(() =>this.findAllVideo(), 100);
    setTimeout(() => this.upSort(), 100);
  },
  // DOM 渲染完成触发
  mounted() {
    setTimeout(() => this.vv(), 200);
    setTimeout(() => this.like(), 500);
    setTimeout(() => this.upSum(), 800);
  }
}


</script>

<style scoped>

</style>